<template>
  <div>
    <h1>App</h1>
    <p>{{ count }}</p>

    <input type="text" v-model="msg" />

    <button @click="fn1">自增1</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["count"]),

    msg: {
      get() {
        return this.$store.state.msg;
      },

      set(value) {
        // 提交 mutation
        this.$store.commit("changeMsg", value);
      },
    },
  },

  methods: {
    fn1() {
      // this.$store.commit("increment");

      this.$store.state.count++;
    },
  },
};
</script>
